
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>绿色主题导航系统</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme222/css/page.css" />
    <link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme111/css/left-side-menu.css">
    <link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme111/font/iconfont.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
    <link href="http://36.133.110.23:8788/assets/theme111/plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; color: #d9efe3; background: #1f2b24; }
        .container { height: 100vh; }

        /* 左侧导航栏 */
        .sidebar { width: 270px; background: #233a2e; height: 100vh; display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.25); transition: all .3s ease; }
        .sidebar.collapsed { width: 0; overflow: hidden; }

        /* 顶部品牌条 */
        .brand-bar { background: #2ea44f; color: #ffffff; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; letter-spacing: 1px; }

        /* 导航区域 */
        .nav-area { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
        .nav-list { list-style: none; margin: 0; padding: 0; }

        /* 一级导航项 */
        .nav-tab { margin: 8px 12px; border-radius: 10px; overflow: hidden; }
        .nav-tab:last-child { margin-bottom: 16px; }

        /* 一级导航链接（图标 + 文本 + 右侧箭头） */
        .li-a { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #b8d1c3; text-decoration: none; cursor: pointer; font-size: 15px; font-weight: 600; border-radius: 10px; transition: all .2s ease; background: transparent; }
        .li-a:hover { background: #2f5141; color: #eaf6ef; }
        .li-a.active { background: #2f5141; color: #ffffff; }

        /* 文本与图标 */
        .li-a .nav-text, .nav-tab-text { display: flex; align-items: center; flex: 1; }
        .li-a i.fa { margin-right: 12px; width: 18px; text-align: center; font-size: 16px; color: #a6c9b6; }
        .li-a.active i.fa { color: #ffffff; }

        /* 展开箭头 */
        .my-icon { transition: transform .2s ease; color: #a6c9b6; font-size: 14px; margin-left: 8px; }
        .nav-tab.expanded .my-icon { transform: rotate(90deg); color: #eaf6ef; }

        /* 二级导航容器 */
        .nav-box { overflow: hidden; border-radius: 10px; transform: scaleY(0); transform-origin: top; transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease; opacity: 0; padding: 0; height: 0; }
        .nav-tab.expanded .nav-box { transform: scaleY(1); opacity: 1; padding: 6px 0 10px; height: auto; }

        /* 二级导航链接 */
        .li-a-a { display: block; padding: 10px 16px 10px 46px; color: #cbe2d6; text-decoration: none; font-size: 14px; transition: all .2s ease; margin: 4px 8px; border-radius: 10px; background: transparent; font-weight: 500; }
        .li-a-a:hover { background: #345846; color: #ffffff; }
        .li-a-a.active { background: #2ea44f; color: #ffffff; font-weight: 600; box-shadow: 0 6px 14px rgba(46, 164, 79, 0.32); }

        /* 主内容区域 */
        .main-content { flex: 1; display: flex; flex-direction: column; background: #f6fbf8; }
        .header { background-color: #2ea44f; padding: 0 22px; box-shadow: 0 1px 6px rgba(0, 21, 41, .25); display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; }
        .breadcrumb { color: #eaf6ef; font-size: 14px; font-weight: 400; }
        .content-area { flex: 1; padding: 16px; overflow: auto; background: #ffffff; }
        .content-card { background: #e7f4ec; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); padding: 24px; }
    </style>
</head>

<body>
    <div class="container">
        <div class="brand-bar">
            {项目名称}
        </div>
        <!-- 左侧导航栏 -->
        <div style="display: flex;">
            <div class="sidebar" id="sidebar">
                <div class="nav-area">
                    <ul class="nav-list">
                    </ul>
                </div>
            </div>
            <!-- 主内容区域 -->
            <div class="main-content">
                <div class="content-area">
                    <iframe src="{$url}" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const navTabs = document.querySelectorAll('.nav-tab');

            // 导航展开/收起
            navTabs.forEach(function(tab) {
                const navLink = tab.querySelector('.li-a');
                if (navLink) {
                    navLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        // 关闭其他展开的菜单
                        navTabs.forEach(function(otherTab) {
                            if (otherTab !== tab) {
                                otherTab.classList.remove('expanded');
                            }
                        });
                        // 切换当前菜单
                        tab.classList.toggle('expanded');
                    });
                }
            });

            // 自动展开选中菜单
            const activeSubNav = document.querySelector('.li-a-a.active');
            if (activeSubNav) {
                const parentNavTab = activeSubNav.closest('.nav-tab');
                if (parentNavTab) {
                    parentNavTab.classList.add('expanded');
                    const headerLink = parentNavTab.querySelector('.li-a');
                    if (headerLink) headerLink.classList.add('active');
                }
            }

            // 响应式处理
            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    sidebar.classList.remove('show');
                }
            });
        });
    </script>
</body>

</html>